<template>
	<div class="app-container">
		<div class="bgWhite radius8 pt30">
			<div class="text-center fb fs16 border-bottom pb30">
				新建订单
			</div>
			<el-form class="p20" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item label="订单来源" prop="customerStatus">
					<el-select v-model="queryParams.customerStatus" placeholder="请选择" size="large" style="width: 200px">
					  <el-option v-for="dict in honorific" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="客户姓名" prop="customerStatus">
					<el-input
						size="large"
					    v-model="queryParams.customerStatus"
					    style="width: 240px"
					    placeholder="请填写"
					  />
				</el-form-item>
				<el-form-item label="业务经理" prop="customerStatus">
					<el-select v-model="queryParams.customerStatus" placeholder="请选择" size="large" style="width: 200px">
					  <el-option v-for="dict in honorific" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="付款类型" prop="customerStatus">
					<el-select v-model="queryParams.customerStatus" placeholder="请选择" size="large" style="width: 200px">
					  <el-option v-for="dict in honorific" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="付款方式" prop="customerStatus">
					<el-select v-model="queryParams.customerStatus" placeholder="请选择" size="large" style="width: 200px">
					  <el-option v-for="dict in honorific" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				 <el-row>
				    <el-col :span="24">
						<el-form-item label="付款备注" prop="customerStatus" style="width: 570px;">
							<el-input
							    style="box-shadow: none;"
								show-word-limit
							    :rows="5"
							    type="textarea"
							    placeholder="请输入备注信息"
								 resize="none"
								:input-style="{background:'#F7F8FA',borderRaduis:'15px',boxShadow:'none'}"
							  />
						</el-form-item>
					</el-col>
				  </el-row>
				  <el-row>
				     <el-col :span="24">
						<el-form-item label="付款截图" prop="customerStatus" style="width: 570px;">
							 <el-upload
							    class="avatar-uploader"
							    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							    :show-file-list="false"
							    :on-success="handleAvatarSuccess"
							    :before-upload="beforeAvatarUpload"
							  >
							    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
							    <div v-else>
									<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
									<div class="fs12">上传图片</div>
								</div>
							  </el-upload>
						</el-form-item>
						</el-col>
				   </el-row>
			</el-form>	
			<div class="flex col-center row-between plr30 border-bottom pb10">
				<div>
					<span class="color-red">*</span>
					<span class="fb mr20">关联商品</span>
					<div class="fs12 color-red mt6">预估收益：300 (订单提成)+100 (溢价分成)</div>
				</div>
				<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
					<el-form-item label="排序" prop="time" style="margin-bottom: 0;">
						 <el-select
						   v-model="value"
						   placeholder="Select"
						   size="large"
						   style="width: 240px"
						 >
						   <el-option
							 v-for="item in options"
							 :key="item.value"
							 :label="item.label"
							 :value="item.value"
						   />
						 </el-select>
					</el-form-item>
					<el-button class="mt5" type="defaultBtn" @click="handleAdd('/peoples/addGoods/index/user/'+1)">添加商品</el-button>
				</el-form>		
			</div>
			<div class="plr30 mt20">
				<el-table :data="tableData" style="width: 100%"
					:cell-style="{ textAlign: 'center','line-height':'54px'}"
					:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }"
					>
					<el-table-column prop="date" label="产品名称" />
					<el-table-column prop="date" label="产品编码" />
					<el-table-column prop="date" label="产品规格" />
					<el-table-column prop="date" label="出厂价" />
					<el-table-column prop="date" label="销售单价（元）" />
					<el-table-column prop="date" label="数量" />
					<el-table-column prop="date" label="总价（元）" />
					<el-table-column fixed="right" label="操作" align="center" width="300px" class-name="small-padding fixed-width">
					   <template #default="scope">
					      <el-button link style="color: red!important;" type="primary" 
						  >删除</el-button>
					   </template>
					</el-table-column>
				</el-table>
				<div class="text-center pt20 pb30">
					溢价金额：60
					合计：¥1660.00
				</div>
			</div>
			<div class="flex col-center row-between plr30 border-bottom pb10">
				<div>
					<span class="color-red">*</span>
					<span class="fb mr20">赠品管理</span>
				</div>
				<el-form class="  " :model="queryParams" ref="queryRef" :inline="true">
					<el-button class="mt5" type="defaultBtn" @click="handleAdd('/peoples/addGift/index/user/'+1)">添加赠品</el-button>
				</el-form>		
			</div>
			<div class="plr30 mt20 pb30">
				<el-table :data="tableData" style="width: 100%"
					:cell-style="{ textAlign: 'center','line-height':'54px'}"
					:header-cell-style="{ 'text-align': 'center','line-height':'54px','height':'54px!important'  }"
					>
					<el-table-column prop="date" label="产品名称" />
					<el-table-column prop="date" label="产品编码" />
					<el-table-column prop="date" label="产品规格" />
					<el-table-column prop="date" label="出厂价" />
					<el-table-column prop="date" label="销售单价（元）" />
					<el-table-column prop="date" label="数量" />
					<el-table-column prop="date" label="总价（元）" />
					<el-table-column fixed="right" label="操作" align="center" width="300px" class-name="small-padding fixed-width">
					   <template #default="scope">
					      <el-button link style="color: red!important;" type="primary" 
						  >删除</el-button>
					   </template>
					</el-table-column>
				</el-table>
			</div>
		</div>	
		<div class="bgWhite radius8 pt20">
			<div class="fb fs16 pb15 pl20 text-center">
				收货信息
			</div>
			<el-form class="p20" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item label="收货人信息" prop="customerStatus">
					<el-input
						size="large"
					    v-model="queryParams.customerStatus"
					    style="width: 200px"
					    placeholder="请填写"
					  />
				</el-form-item>
				<el-form-item label="收货人手机号" prop="customerStatus">
					<el-input
						size="large"
					    v-model="queryParams.customerStatus"
					    style="width: 200px"
					    placeholder="请填写"
					  />
				</el-form-item>
				<el-form-item label="收货地址" prop="customerStatus">
					<el-select v-model="queryParams.customerStatus" placeholder="请输入" size="large" style="width: 340px">
					  <el-option v-for="dict in bus_source" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="物流" prop="customerStatus">
					<el-select v-model="queryParams.customerStatus" placeholder="请选择" size="large" style="width: 170px;margin-right: 20px;">
					  <el-option v-for="dict in bus_source" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
					<el-select v-model="queryParams.customerStatus" placeholder="请输入" size="large" style="width: 200px">
					  <el-option v-for="dict in bus_source" :key="dict.value" :label="dict.label" :value="dict.value" />
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<div class="bgWhite radius8 pt20">
			<div class="fb fs16 pb15 pl20 text-center">
				收货信息
			</div>
			<el-form class="p20" :model="queryParams" ref="queryRef" :inline="true">
				<el-form-item label="文档单据:" prop="customerStatus">
					<el-checkbox v-model="checked1" label="发票" size="large" />
					<el-checkbox v-model="checked2" label="出库单" size="large" />
				</el-form-item>
			</el-form>	
			<div class="text-center mt25 pb30">
				<el-button type="defaultBtn" style="height: 38px;">提交审批</el-button>
				<el-button type="operate" style="width: 88px;height: 38px;">保存草稿</el-button>
				<el-button style="width: 88px;height: 38px;">预览</el-button>
			</div>
		</div>	
		
	</div>
</template>
<script setup name="addCustomer">
	const { proxy } = getCurrentInstance();
	const { bus_customer_status,bus_channel,bus_customer_type,bus_source,bus_customer_starlevel,bus_client_tag,honorific } = 
	proxy.useDict("bus_customer_status","bus_channel","bus_customer_type","bus_source","bus_customer_starlevel","bus_client_tag","honorific");
</script>
<script>
	export default{
		data(){
			return {
				imageUrl:'',
				value:'',
				checked1:false,
				checked2:false,
				options:[
				  {
				    value: 'Option1',
				    label: 'Option1',
				  },
				  {
				    value: 'Option2',
				    label: 'Option2',
				  },
				  {
				    value: 'Option3',
				    label: 'Option3',
				  },
				  ],
				 tableData: [
					 {
						date: '2016-05-03',
						name: 'Tom',
						state: 'California',
						city: 'Los Angeles',
						address: 'No. 189, Grove St, Los Angeles',
						zip: 'CA 90036',
					 }, 
					 {
						date: '2016-05-03',
						name: 'Tom',
						state: 'California',
						city: 'Los Angeles',
						address: 'No. 189, Grove St, Los Angeles',
						zip: 'CA 90036',
					 },
				 ], 
				queryParams:{
					pageNum:'',
					pageSize:'',
					customerStatus:'',//客户状态
					customerType:'',//客户类型
					customerStarLevel:'',//客户星级
					startTime:'',//开始时间
					endTime:'',//结束时间					
					keyWords:'',//关键词
					customerRoleType:'',//客户分类
					recentlyConsumption:'',//最近消费
					recentlyConsumptionNumber:'',//最近消费次数
					followUpStartTime:'',//下次跟进开始时间
					followUpEndTime:'',//下次跟进结束时间
					customerLabels:'',//客户标签
					businessManagerId:'',//业务经理
					time:'',
				},
				list:[{}],
				loading:false
			}
		},
		methods:{
			mergeRows({ row, column, rowIndex, columnIndex }) {
			      if (columnIndex === 0) {
			        if (rowIndex % 2 === 0) {
			          return [1, 2]; // 表示该单元格行跨度为1，列跨度为2
			        } else {
			          return [0, 0]; // 不合并
			        }
			      }
			    
			  },
			handleAdd(url){
				this.$router.push(url)
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
	  background: #F7F8FA;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	  transition: var(--el-transition-duration-fast);
	  width: 110px;
	  height: 110px;
	  text-align: center;
	  line-height: 22px;
	  color: #8c939d;
	}
	
	.avatar-uploader .el-upload:hover {
	  border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  text-align: center;
	}
</style>